<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    on-ok="handleOk"
    switch-fullscreen
    :footer="null"
    @cancel="handleCancel"
  >
    <a-row>
      <a-col :offset="4" :span="16">
        <a-input-search
          v-model:value="searchValue"
          placeholder="请输入关键字..."
          :loading="loading"
          enter-button
          @search="onSearch"
        />
      </a-col>
      <a-col :span="24" v-if="showTips">
        <h3 style="text-align: center;margin-top: 20px">
          共搜索到 <span style="color: red">{{ listData.length }}</span> 篇与 <span
          style="color: red">{{ searchValue }}</span> 有关的文章
        </h3>
      </a-col>
      <a-col :span="24">
        <a-divider/>
      </a-col>
      <a-col :span="20" :offset="2" class="joe_header__above-search" v-if="listData.length === 0">
        <h3>阅读量前Top5推荐：</h3>
        <nav class="result active">
          <template v-for="(item,index) in top5Data">
            <a :href="'/articleDetails/'+item.id" :title="item.title" class="item">
              <span class="sort">{{ index + 1 }}</span>
              <span class="text">{{ item.title }}</span>
              <span class="views">{{ item.viewsNum }} 阅读</span>
            </a>
          </template>

        </nav>
      </a-col>

      <a-col :span="24">
        <a-spin :spinning="loading" :delay="30">
          <div class="joe_index__list" data-wow="fadeIn">
            <ul class="">
              <template v-for="item in listData">
                <li class="joe_list__item wow default" style="visibility: visible;">
                  <div class="line"></div>
                  <a
                    :href="'/articleDetails/'+item.id"
                    class="thumbnail"
                    :title="item.title"
                  >
                    <img
                      class="carousel-img"
                      :src="getImgView(item.cover)"
                      :alt="item.title"
                    />
                    <time :datetime="item.publishTime">{{ item.publishTime }}</time>
                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
                      <path
                        d="M903.93 107.306H115.787c-51.213 0-93.204 42.505-93.204 93.72V825.29c0 51.724 41.99 93.717 93.717 93.717h788.144c51.72 0 93.717-41.993 93.717-93.717V201.025c-.512-51.214-43.017-93.719-94.23-93.719zm-788.144 64.527h788.657c16.385 0 29.704 13.316 29.704 29.704v390.229L760.54 402.285c-12.805-13.828-30.217-21.508-48.14-19.971-17.924 1.02-34.821 10.754-46.602 26.114l-172.582 239.16-87.06-85.52c-12.29-11.783-27.654-17.924-44.039-17.924-16.39.508-31.755 7.676-43.53 20.48L86.595 821.705V202.05c-1.025-17.416 12.804-30.73 29.191-30.217zm788.145 683.674H141.906l222.255-245.82 87.06 86.037c12.8 12.807 30.212 18.95 47.115 17.417 17.41-1.538 33.797-11.266 45.063-26.118l172.584-238.647 216.111 236.088 2.051-1.54V825.8c.509 16.39-13.315 29.706-30.214 29.706zm0 0"
                      ></path>
                      <path
                        d="M318.072 509.827c79.89 0 144.417-65.037 144.417-144.416 0-79.378-64.527-144.925-144.417-144.925-79.891 0-144.416 64.527-144.416 144.412 0 79.892 64.525 144.93 144.416 144.93zm0-225.327c44.553 0 80.912 36.362 80.912 80.91 0 44.557-35.847 81.43-80.912 81.43-45.068 0-80.916-36.36-80.916-80.915 0-44.556 36.872-81.425 80.916-81.425zm0 0"
                      ></path>
                    </svg>
                  </a>
                  <div class="information">
                    <a :href="'/articleDetails/'+item.id" class="title"
                       v-html="item.title"
                    />
                    <a
                      class="abstract"
                      :href="'/articleDetails/'+item.id"
                      title="文章摘要"
                    >
                      <div v-html="item.html"/>
                    </a>
                    <div class="meta">
                      <ul class="items">
                        <li>{{ item.publishTime }}</li>
                        <li>{{ item.viewsNum }} 阅读</li>
                        <li>{{ item.collectNum }} 收藏</li>
                        <li>{{ item.likesNum }} 点赞</li>
                        <li>{{ item.publishForm_dictText }}</li>
                      </ul>
                      <div class="last" style="display: flex">
                        <svg-icon icon-class="articleSort" class="icon"/>
                        <a
                          class="link"
                          :href="'/articleSortList/'+item.articleSort"
                        >
                          {{ item.articleSort_dictText }}
                        </a>
                      </div>
                    </div>
                  </div>
                </li>
              </template>
            </ul>
          </div>
        </a-spin>
      </a-col>
    </a-row>


  </a-modal>
</template>

<script>
import AntsFormContainer from '@/components/ants/AntsFormContainer'
import {getAction, getFileAccessHttpUrl} from "@/api/manage";

export default {
  name: 'ArticleSearch',
  inject: ['reload'],
  components: {
    AntsFormContainer,
  },
  data() {
    return {
      form: this.$form.createForm(this),
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 4}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      title: '搜索',
      width: 1000,
      visible: false,
      disableSubmit: false,
      loading: false,
      searchValue: '',
      url: {
        searchAllActive: '/articleView/searchAllActive',
        getArticleTop5ByViewNum: '/articleView/getArticleTop5ByViewNum',
      },
      showTips: false,
      listData: [],
      top5Data: []
    }
  },
  computed: {},
  methods: {
    show() {
      this.getArticleTop5ByViewNum()
      this.visible = true
    },
    handleCancel() {
      this.visible = false
    },
    onSearch(value) {
      this.loading = true
      if (value) {
        getAction(this.url.searchAllActive, {
          'value': value
        }).then(res => {
          if (res.success) {
            this.listData = res.result.records
            this.showTips = true
            this.loading = false
          }
        })
      } else {
        this.showTips = false
        this.listData = []
        this.loading = false
      }

    },
    getArticleTop5ByViewNum() {
      this.top5Data = []
      getAction(this.url.getArticleTop5ByViewNum, {}).then(res => {
        if (res.success) {
          this.top5Data = res.result
        }
      })
    },
    /* 图片预览 */
    getImgView(text) {
      if (text && text.indexOf(',') > 0) {
        text = text.substring(0, text.indexOf(','))
      }
      return getFileAccessHttpUrl(text)
    },

  }

}
</script>

<style scoped>
.joe_index__list {
  min-height: 400px;
}

.joe_list__item.default {
  display: flex;
  position: relative;
}

.joe_list__item {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #ebeef5;
  padding: 15px 0;
}

.joe_list__item:last-child {
  border-bottom: none
}

li {
  list-style: none;
}

.joe_list__item .line {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: -15px;
  width: 4px;
  height: 25px;
  border-radius: 2px;
  background: #409eff;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  transition: transform 0.35s, -webkit-transform 0.35s;
}

.joe_list__item.default .thumbnail {
  flex-shrink: 0;
  position: relative;
  width: 210px;
  height: 140px;
  margin-right: 15px;
  overflow: hidden;
}

.carousel-img {
  width: 210px;
  height: 140px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 4px;
  transition: opacity 0.35s;
}

img {
  border: 0;
  vertical-align: middle;
}

.joe_list__item.default .thumbnail time {
  position: absolute;
  z-index: 1;
  top: 5px;
  right: 5px;
  background: #409eff;
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  transition: transform 0.35s, -webkit-transform 0.35s;
  -webkit-transform: translate3d(120%, 0, 0);
  transform: translate3d(120%, 0, 0);
}

.joe_list__item.default .thumbnail svg {
  position: absolute;
  z-index: 1;
  top: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
  fill: #fff;
}

.joe_list__item.default .information {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.joe_list__item .information .title:hover {
  color: #409eff;
}

.joe_list__item .information .title {
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  color: #303133;
  font-size: 18px;
  line-height: 24px;
  max-height: 48px;
  transition: color 0.35s;
}

.joe_list__item .information .title .badge {
  height: 20px;
  line-height: 20px;
  background-image: -webkit-linear-gradient(
    0deg, #3ca5f6 0%, #a86af9 100%);
  color: #fff;
  font-size: 12px;
  margin-right: 5px;
  border-radius: 2px;
  padding: 0 8px;
  white-space: nowrap;
  vertical-align: 2px;
}

.joe_list__item .information .abstract {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #909399;
  word-break: break-word;
  opacity: 0.85;
}

.joe_list__item .meta {
  display: flex;
  align-items: center;
  margin-top: auto;
  color: #909399;
  font-size: 13px;
}

.joe_list__item .meta .items {
  display: flex;
  align-items: center;
}

.joe_list__item .meta .items li::after {
  content: '/';
  color: #909399;
  padding: 0 5px;
}

.joe_list__item .meta .last {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.joe_list__item .meta .last .icon {
  margin-right: 3px;
}

.joe_list__item .meta .last .link {
  color: #909399;
}

.joe_list__item .meta .last .link:hover {
  color: #409eff;
}

.see-more {
  margin: 15px auto 0;
  width: 120px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fff;
  color: #606266;
  transition: -webkit-transform 0.25s;
  transition: transform 0.25s;
  transition: transform 0.25s, -webkit-transform 0.25s;
  box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
}

.see-more:hover {
  box-shadow: 2px 2px 20px 5px rgba(158, 158, 158, 0.22);
}

ul {
  padding-left: 0;
}

.joe_list__item .meta .items li:last-child::after {
  display: none
}

.joe_list__item.default:hover .thumbnail time {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}


</style>
<style>
.joe_header__above-search .result.active {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
}

.joe_header__above-search .result {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 0 10px rgb(0 0 0 / 15%);
  border-radius: 4px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.35s, opacity 0.35s, -webkit-transform 0.35s;
  transition: visibility 0.35s, opacity 0.35s, transform 0.35s;
  transition: visibility 0.35s, opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
  -webkit-transform: translate3d(0, 15px, 0);
  transform: translate3d(0, 15px, 0);
}

.joe_header__above-search .result .item {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #f2f6fc;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 10px;
  transition: background 0.35s;
}

.joe_header__above-search .result .item:nth-child(1) .sort {
  background: #fe2d46;
}

.joe_header__above-search .result .item .sort {
  color: #fff;
  background: #7f7f8c;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 2px;
  text-align: center;
  margin-right: 8px;
  font-weight: 500;
}

.joe_header__above-search .result .item .text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #606266;
  font-size: 14px;
}

.joe_header__above-search .result .item .views {
  color: #c0c4cc;
  font-size: 14px;
  margin-left: 5px;
}
</style>
